<template>
  <div>
    <BasicTable @register="registerTable" >
      <template #applyResource="{ record }">
        <Tooltip placement="topLeft">
          <template #title>
            <span>{{ record.resourceNames }}</span>
          </template>
          <div class="apply-resource">{{ record.resourceNames }}</div>
        </Tooltip>
      </template>
    </BasicTable>
    <InputForm @register="registerInputForm" @success="handleSuccess" @close="handleAutoReload()" />
    <FormDetail @register="registerFormDetail"/>
  </div>
</template>
<script lang="ts" name="PermissionApproval" setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { Tooltip } from "ant-design-vue"
import { Auth } from '/@/enums/authEnum'
import { BasicTable, BasicColumn, useTable } from '/@/components/Table';
import { useDrawer } from '/@/components/Drawer';
import { useI18n } from '/@/hooks/web/useI18n';
import { useModal } from "/@/components/Modal"
import { usePermission } from '/@/hooks/web/usePermission';
import { useGlobSetting } from '/@/hooks/setting';
import { columns, searchFormSchema, Status } from './data';
import { pagePermissionApply } from '/@/api/sys/ram';
import { useMessage } from '/@/hooks/web/useMessage';
import InputForm from './ApprovalForm.vue';
import FormDetail from './Detail.vue';
import { useUserStore } from "/@/store/modules/user"

const userStore = useUserStore()
const { t } = useI18n('');
const { createMessage } = useMessage();
const glob = useGlobSetting();
const { isDisabledAuth } = usePermission()
const [registerInputForm, { openModal: openInputForm }] = useModal();
const [registerFormDetail, { openDrawer: openFormDetail }] = useDrawer()
let timer : any = null
let isAutoReload : boolean = true
const actionColumn: BasicColumn = {
  width: 130,
  title: '操作',
  dataIndex: 'action',
  fixed: 'right',
  slot: 'tableActions',
  actions:  (record: Recordable) => [
    {
      label: '审批',
      ifShow: record.status == Status.WAIT_APPROVE,
      onClick: handleForm.bind(null, record),
    },
    {
      label: '详情',
      onClick: handleDetail.bind(null, record),
    },
  ],
  dropDownActions: (record: Recordable) => [
    
  ]
}

const [registerTable, { reload, expandAll, collapseAll, expandCollapse }] = useTable({
  title: '权限审批',
  alwaysShowTitle: true,
  api: pagePermissionApply,
  columns: columns,
  bordered: false,
  beforeFetch: (params) => {
    return params;
  },
  formConfig: {
    baseColProps: { lg: 6, md: 12 },
    labelWidth: 90,
    schemas: searchFormSchema,
    showResetButton: false,
    fieldMapToTime: [["applyTime", ["beginDate", "endDate"], "YYYY-MM-DD"]],
  },
  showTableSetting: true,
  useSearchForm: true,
  isTreeTable: false,
  pagination: true,
  canResize: true,
  rowKey: 'id',
  actionColumn,
})

const handleForm = (record) => {
  openInputForm(true, { record })
  // isAutoReload = false
};
const handleDetail = (record) => openFormDetail(true, { record })
const handleSuccess = () => {
  reload()
  // isAutoReload = true
  // handleAutoReload()
}
const handleAutoReload = () => {
  timer = setTimeout(async () => {
    await reload()
    clearTimeout(timer)
    timer = null
    if (!isAutoReload) {
      return
    }
    handleAutoReload()
  }, 5000)
}
onMounted(() => {
  // handleAutoReload()
})

onUnmounted(() => {
  // clearTimeout(timer)
  // timer = null
})
</script>

<style lang="less" scope>

.apply-resource {
  text-align: left;
  border: 1px;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  margin-left: 12px;
  text-overflow: ellipsis;
}
</style>
